body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;

}

.slider-container {

    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;
}

.slides {
    display: flex;
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    /* 添加过渡效果和贝塞尔曲线 */
}

.slides img {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    display: block;
}

.slides a {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    flex: 0 0 auto;
}




.progress {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.progress-bar {
    width: 50px;
    /* 保持宽度不变 */
    height: 5px;
    /* 调整高度为更细的长方形 */
    border-radius: 0;
    /* 移除圆角以获得矩形形状 */
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
}

.progress-bar.active {
    background-color: #2b46ff;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #ccc;
}

.left-arrow {
    left: 10px;

}

.right-arrow {
    right: 10px;
    filter: invert(100%);
}

.Click {
    position: absolute;
    top: 82%;
    left: 9%;

}

.Click p {
    color: rgba(240, 248, 255, 0.369);
    font-size: 15px;

}